import React, { Component } from "react";

class Child1 extends Component {
  render() {
    console.log(this);
    // this.props.children相当于vue的slot标签，用于显示插槽的内容
    // 插槽不仅可以插文本，也可以插入标签，甚至组件
    return <div>child1组件 - {this.props.children}</div>;
  }
}

const Child2 = (props) => {
  console.log(props);
  return (
    <div>
      {props.children.a} - child2组件 - {props.children.b}
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <>
        <h2>props.children</h2>
        {/* 默认情况下子组件标签中间的写的内容，是没有的 */}
        <Child1>
          <span>123</span>
        </Child1>
        {/* 具名插槽可以直接传入对象的方式来做 */}
        {/* 里面的括号表示对象的括号，外面的括号表示jsx的括号 */}
        <Child2>
          {{
            a: <span>456</span>,
            b: <span>789</span>,
          }}
        </Child2>
      </>
    );
  }
}

export default App;
